<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时监控</title>
    <style>
        div{
            display: inline-block;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <div id="cpu" style="width: 600px;height:400px;"></div>
    <div id="memory" style="width: 600px;height:400px;"></div>
    <div id="disk" style="width: 600px;height:400px;"></div>
    <script>
        var url=window.location.search
        var ipAddress=url.split("=")[1];
        console.log(ipAddress)
        var cpuChartDom = document.getElementById('cpu');
        var myCpuChart = echarts.init(cpuChartDom, 'dark');
        var optionCpu;
        var memoryChartDom = document.getElementById('memory');
        var myMemoryChart = echarts.init(memoryChartDom, 'dark');
        var optionMemory;
        var diskChartDom = document.getElementById('disk');
        var myDiskChart = echarts.init(diskChartDom, 'dark');
        var optionDisk;

        //需要去后端请求数据  ajax请求
        function myAjax () {
            let res = $.ajax({
                //请求方式
                type: "get",
                //请求的地址
                url: "infoService/queryInfoLast",
                async: false,
                data:{"ipAddress":ipAddress},
                dataType: "JSON",
                //成功后的回调函数
                success: function (returnData) {
                },
                //错误回调函数
                error: function (x, t, e) {
                    alert("错误：" + e);
                }
            });
            let returnData = res.responseJSON
            let cpuData=[];
            let memoryData=[];
            let diskData=[];
            if(returnData.code==0){
                for (let info of returnData.data) {
                    let cpuUsage= {
                        name: info.createTime,
                        value: [
                            info.createTime,
                            info.cpuUsage
                        ],
                        ip:info.ipAddress
                    };
                    let memoryUsage= {
                        name: info.createTime,
                        value: [
                            info.createTime,
                            info.memoryUsage
                        ],
                        ip:info.ipAddress
                    };
                    let diskUsage= {
                        name: info.createTime,
                        value: [
                            info.createTime,
                            info.diskUsage
                        ],
                        ip:info.ipAddress
                    };
                    cpuData.push(cpuUsage)
                    memoryData.push(memoryUsage)
                    diskData.push(diskUsage)
                }
                console.log(cpuData)
            }
            return  {"cpuData":cpuData,"memoryData":memoryData,"diskData":diskData};
        }

        optionCpu = {
            title: {
                text: 'cpu负载情况['+myAjax().cpuData[0].ip+']'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return (
                        params.name +
                        ' : ' +
                        params.value[1]
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data:  myAjax().cpuData
                }
            ]
        };
        optionMemory = {
            title: {
                text: '内存使用情况%['+myAjax().memoryData[0].ip+']'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return (
                        params.name +
                        ' : ' +
                        params.value[1]+'%'
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data:  myAjax().memoryData
                }
            ]
        };
        optionDisk = {
            title: {
                text: '磁盘使用情况%['+myAjax().diskData[0].ip+']'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return (
                        params.name +
                        ' : ' +
                        params.value[1]+'%'
                    );
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data:  myAjax().diskData
                }
            ]
        };
        setInterval(function () {
            myCpuChart.setOption({
                series: [
                    {
                        data:myAjax().cpuData
                    }
                ]
            });
            myMemoryChart.setOption({
                series: [
                    {
                        data:myAjax().memoryData
                    }
                ]
            });
            myDiskChart.setOption({
                series: [
                    {
                        data:myAjax().diskData
                    }
                ]
            });
        }, 10000);
        // 使用刚指定的配置项和数据显示图表。
        myCpuChart.setOption(optionCpu);
        myMemoryChart.setOption(optionMemory);
        myDiskChart.setOption(optionDisk);
    </script>
</body>
</html>
